<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="2" cellspacing="0" width="50%" align="center" cellpadding="10px">
        <thead>
            <tr>
                <th colspan="5">
                    <h1>购物车订单</h1>
                </th>
            </tr>
            <tr>
                <th>订单编号</th>
                <th>商品图片</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>购买数量</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="5">总价￥：<span style="color: red;font-weight: 900;"></span></th>
            </tr>
            <tr>
                <th colspan="2"><button style="cursor: pointer;" class="pay">取消订单</button></th>
                <th></th>
                <th colspan="2"><button style="cursor: pointer;" class="Pays">支付订单</button></th>
            </tr>
        </tfoot>
    </table>
    <!-- CDN引⼊JQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        window.onload = () => {
            data()
            $('.Pays').on('click', pay)
            $('.pay').on('click', Cancel)
        }
        // 渲染订单
        function data() {
            let Order = JSON.parse(localStorage.getItem('car'))
            $('tbody').html('')
            $.each(Order, (index, item) => {
                $('tbody').append(`
                    <tr>
                        <th>${item.id}</th>
                        <th><img src="${item.img}" alt="${item.name}" width="100px" height="100px" style="border-radius: 10px;">
                        </th>
                        <th>${item.name}</th>
                        <th>${item.Price}</th>
                        <th>${item.num}</th>
                    </tr>
                `)
            })
            // 获取总价
            $('tfoot span').text(Order.reduce((a, b) => a += (b.Price * b.num), 0))
        }
        // 支付订单
        function pay() {
            if (window.confirm('确认支付？')) {
                let Order = JSON.parse(localStorage.getItem('car'))
                alert(`本次交易金额为：${Order.reduce((a, b) => a += (b.Price * b.num), 0)}元！`)
                location.assign('./5.28.购物车.html')
            }
        }
        // 取消订单
        function Cancel() {
            if (window.confirm('确认取消订单？')) {
                location.assign('./5.28.购物车.html')
            }
        }
    </script>
</body>

</html>